import React, { Component } from 'react';
import { useSearchParams } from 'react-router-dom';

// v6使用class组件, 需要封装一下, 利用hoc组件, useSearchParams钩子来获取参数，然后传递给class组件
function myWithRouter(Details) {
    return (props) => {
        let [searchParams] = useSearchParams();
        const params = {
            id: searchParams.get('id'),
            title: searchParams.get('title')
        };
        return <Details_search {...props} params={params} />
    }
}
const detailData = [
    { id: '01', content: 'Detail_search-1' },
    { id: '02', content: 'Detail_search-2' },
    { id: '03', content: 'Detail_search-3' }
];

class Details_search extends Component {
    render() {
        const { params: { id, title } } = this.props
        const res = detailData.find(detailDataObj => detailDataObj.id === id);
        return (
            <div>
                <ul>
                    <li>ID:{id}</li>
                    <li>TITLE:{title}</li>
                    <li>CONTENT:{res.content}</li>
                </ul>
            </div>
        );
    }
}

export default myWithRouter(Details_search);